<script lang="ts" setup>
import { computed, ref } from 'vue';
import ArrowLeft from '@iconify-icons/ant-design/arrow-left-outlined';
import ArrowRight from '@iconify-icons/ant-design/arrow-right-outlined';
defineOptions({
  name: 'ReLayoutFold'
});

const $props = defineProps({
  // 行数
  className: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: '240px'
  }
});
const $emit = defineEmits(['fold']);

const isFold = ref(false);
const asideWidth = computed(() => {
  const { width } = $props;
  return typeof width === 'number' ? `${width}px` : width;
});
const onClickFold = () => {
  isFold.value = !isFold.value;

  $emit('fold', isFold.value);
};
</script>

<template>
  <div :class="className" class="flex justify-between box-border p">
    <div
      v-show="!isFold"
      :style="{ width: asideWidth }"
      class="box-border flex-shrink-0 border-r border-solid border-color"
    >
      <div class="rounded-sm h-full">
        <slot name="aside" />
      </div>
    </div>
    <div class="flex-1 relative bg-white rounded-sm min-w-[50%]">
      <span
        class="absolute z-10 top-1/2 cursor-pointer border border-solid bg-white border-color rounded-full w-[24px] h-[24px] flex items-center justify-center text-center shadow"
        :class="[isFold ? '-left-[10px]' : 'left-[-12px]']"
        @click="onClickFold"
      >
        <el-tooltip
          effect="dark"
          :content="isFold ? '点击展开' : '点击收起'"
          placement="top"
        >
          <IconifyIconOffline :icon="isFold ? ArrowRight : ArrowLeft" />
        </el-tooltip>
      </span>
      <slot />
    </div>
  </div>
</template>
